import { useAntdTable } from 'ahooks';
import { PaginatedParams } from 'ahooks/lib/useAntdTable';
import { Button, DatePicker, Form, Input, Table } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { getReportApi } from 'services/api';
import { download } from 'utils/httpUtils';
const ReportExport = () => {
    const columns = [
        {
            title: '报表名',
            dataIndex: 'fileName'
        },
        {
            title: '生成时间',
            dataIndex: 'gmtCreate',
            render: (value: any) => moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '操作',
            render: (file: any) => <div>
                <Button type="primary" className="mr10" onClick={() => downloadFile(file)}>下载</Button>
            </div>
        }
    ]
    const [form] = Form.useForm()
    const getTableData = (
        { current, pageSize }: PaginatedParams[0],
        formData: any,
    ) => {
        const query = {
            pageNo: current,
            pageSize,
            type: 1,
            ...formData
        }
        return getReportApi(query).then((res) => ({
            total: res.totalCount,
            list: res.data
        }))
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        defaultPageSize: 10,
        form,
    });

    const { submit } = search;

    const downloadFile = (file: any) => {
        download('/api/report/downloadReport', { fileName: file.fileName })
    }

    const [dateRange, setDateRange] = useState<any>()
    const dateChange = (date: any, dateString: [string, string]) => {
        console.log(date, dateString)
        setDateRange(date)
    }
    const batchDownload = () => {
        const from = dateRange[0].valueOf()
        const to = dateRange[1].valueOf()
        download('/api/report/downloadReport', { from, to })
    }
    return (
        <div className="report-export">
            <div style={{ display: 'flex', justifyContent: 'flex-end', padding: 10 }}>
                <div>
                    <DatePicker.RangePicker value={dateRange} onChange={dateChange} />
                    <Button className="ml20 mr20" disabled={!dateRange} onClick={batchDownload}>下载</Button>
                </div>
                <Form form={form} layout="inline">
                    <Form.Item name="query">
                        <Input placeholder="请输入要搜索的内容" allowClear />
                    </Form.Item>
                    <Button onClick={submit}>搜索</Button>
                </Form>
            </div>

            <Table columns={columns} rowKey="id" {...tableProps} />
        </div>
    )
}
export default ReportExport